<template>
	<view class="con">
		<view class="bgFD2F55"></view>
		<view :style="{paddingTop:shh+'px'}"></view>
		<view class="flex-a-i ">
			<uni-icons @click="back" type="left" size="22" color="#000"></uni-icons>
			<view @click="navto('/pages/search')" class="size28 color666 bgF9F9F9 flex-a-i height70 ra16 boxshow width450" style="border:5px solid #fff;">
				<image mode="widthFix" src="/static/sou.png" class="image mr20 ml30 width40"></image>
				<view>查单词/词根/课程</view>
			</view>
		</view>
		
		<view class="ra20  pg20-15 mb20 mt20" style="box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(0,0,0,0.1);">
			<view class="flex">
				<view>
					<image :src="item.coverImage" class="wh200-110 ra20"></image>
				</view>
				<view class="ml15 flex1">
					<view class="size28 bold one">
						<mp-html :content="item.courseName"></mp-html>
					</view>
					<view class="size24 color666 two"><mp-html :content="item.summary"></mp-html>
					</view>
				</view>
			</view>
			
			<view class="flex-ju-b  ">
				<view class="size24 colorFD2F55 bgFFEAED pg2-20 ra5">{{item.wordCount}}词</view>
				<!-- <view class="flex-a-i">
					<view class="size24 color666 deleted-text">￥{{item.originalPrice}}</view>
					<view class="size32 colorFD2F55 bold">￥{{item.discountPrice}}</view>
				</view> -->
				<view v-if="item.isLearning" class="wh140-48 ra5 bgFD2F55 colorfff size24 flex-ju-c">正在学习</view>
				<view v-else-if="item.isToll==0" class="bgFD2F55 colorfff ra10 size24 wh140-50 flex-ju-c">免费试听</view>
				<view v-else-if="item.isToll==2" class="bgFD2F55 colorfff ra10 size24 wh140-50 flex-ju-c">去学习</view>
				<view v-else class="flex-a-i">
					<template v-if="item.discountPrice>0">
						<view class="size24 color666 deleted-text">￥{{item.originalPrice}}</view>
						<view class="size32 colorFD2F55 bold">￥{{item.discountPrice}}</view>
					</template>
					<view v-else class="size32 colorFD2F55 bold">￥{{item.originalPrice}}</view>
				</view>
			</view>
		</view>
		<view class="flex-a-i size28 mt30 mb30">
			<view @click="tablist(index)" class="flex-ju-c flex-col mr50 color666" :key="index" :class="{active:tindex==index}" v-for="(item,index) in ['课程目录','详细介绍']">
				{{item}}
				<view class="wh45-6 ra4  mt8" :class="tindex==index?'bgFD2F55':'bgfff'"></view>
			</view>
		</view>
		
		<view class="flex-ju-b size24">
			<view>全部 {{info.allRootCount}} <uni-icons type="bottom" size="15"></uni-icons></view>
			<view @click="open=true" class="color666 ">全部展开</view>
		</view>
		
		<view v-if="tindex">
			<mp-html :content="info.courseDetailIntro"></mp-html>
		</view>
		
		<view v-else class="flex-a-i">
			<scroll-view scroll-y style="overflow-y: hidden;" class="hrig" :scroll-into-view="scrollview" scroll-with-animation>
				<template v-if="type==2">
				<view :id="'section'+item.root[0].toUpperCase()" v-for="(item,index) in list" :key="index"   class="border-bECEDEE pb30 mt30">
						<view @click="navto('/pages/index/root_detail?id='+item.rootId)" class="flex-ju-b mb20">
							<view class="ra32 bold ">{{item.root}}</view>
							<view>
								<view class="flex-a-i">
									<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
										<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
									</view>
									<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
										<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
									</view>
								</view>
							</view>
						</view>
						<uni-collapse ref="collapse" class="viewcollapse" @change="change($event,item)">
							<uni-collapse-item :open="open" :name="'key'+index" title-border="none">
								<template v-slot:title>
									<view class="flex-ju-b color666">
										<view class=" size24 one flex1">{{item.meaning}}</view>
										<view class="flex-a-i size22">
											{{item.zhan?'收起':'展开'}}
										</view>
									</view>
								</template>
								<view class="content">
									<view class="flex-a-i flex-wrap size24">
										<view v-for="(items,s) in item.words" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
				</view>
				</template>
				<template v-else>
				<view :id="'section'+item.root[0].toUpperCase()" v-for="(item,index) in list" :key="index"  class="border-bECEDEE pb30 mt30">
						<view class="flex-ju-b mb20" >
							<view @click="navto('/pages/index/root_detail?id='+item.rootId)"  class="ra32 bold flex1">{{item.root}}</view>
							<view>
								<view class="flex-a-i">
									<view @click.stop="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
										<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
									</view>
									<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
										<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="color666 size24 one flex1"></view>
					</view>
				</template>
				
			</scroll-view>
			<view class="size22 color666">
				<view @click="tapzimu(item)" class="wh60-35 flex-ju-c" v-for="(item,p) in zimu" :key="p">{{item}}</view>
			</view>
		</view>
		
		
	</view>
	<view class="posifi width1000 zindex5 bottom0">
		<view class="center flex-a-i height165 bgfff pl30 pr30" style="box-shadow: 0rpx -4rpx 30rpx 0rpx rgba(0,0,0,0.1);border-top-right-radius: 20px;border-top-left-radius: 20px;">
			<view @click="kesCollect" class="flex-ju-c flex-col">
				<image mode="heightFix" :src="info.isCollect?'/static/bhongxing.png':'/static/cang.png'" class="image height41"></image>
				<view class="size24 bold">收藏</view>
			</view>
			<button class="but" open-type="contact">
				<view class="ml50 mr50">
					<image mode="heightFix" src="/static/kkfu.png" class="image height41"></image>
					<view class="size24 bold">客服</view>
				</view>
				
			</button>
			
			<view v-if="item.isToll==1" @click="tapcourser(1)" class="bg000 flex-ju-c ra20 height80 colorfff flex1">立即解锁</view>
			<view v-if="item.isToll==2||item.isToll==0" class="bgECEDEE flex-ju-c color666 ra20 height80  flex1">已解锁</view>
		</view>
	</view>
	<add ref="add" @collection="collection" type="2" :wordId="rootId"></add>
</template>

<script>
	export default {
		data() {
			return {
				open:false,
				isCollection:0,
				tindex:0,
				list:[],
				rootId:"",
				info:{},
				type:2,
				item:{},
				addrootid:"",
				wordId:"",
				couritem:{}
			}
		},
		onLoad(option) {
			if(option.type){
				this.item = JSON.parse(decodeURIComponent(option.item))
			}else{
				this.item = JSON.parse(option.item)
			}
			
			if(this.item.isToll==1){
				this.type=1
			}
			this.getinfo()
		},
		methods: {
			tapzimu(item){
				this.scrollview ='section'+item
			},
			kesCollect(){
				if(this.info.isCollect){
					this.http('/api/folder_favorite_relation/cancel?type=4&entryId='+this.item.courseId,{
						type:4,
						entryId:this.item.courseId
					}).then(res=>{
						this.info.isCollect = false
						this.toast('取消收藏')
					})
				}else{
					this.http('/api/folder_favorite_relation/add',{
						favoriteType:4,
						entryId:this.item.courseId
					},'post').then(res=>{
						this.info.isCollect = true
						this.toast('收藏成功')
					})
				}
			},
			collection(){
				this.couritem.isCollect=1
				this.toast('收藏成功')
			},
			tapopen(item,index){
				if(item.isCollect==1){
					this.http('/api/folder_favorite_relation/cancel',{
						entryId:item.rootId,
						type:2
					}).then(res=>{
						item.isCollect = 0
						this.toast('已取消')
					})
				}else{
					this.couritem = item
					this.rootId=item.rootId
					setTimeout(()=>{
						this.$refs.add.open()
					},10)
				}
			},
			getinfo(){
				this.http('/api/course/detail',{
					courseId:this.item.courseId,
				},'post').then(res=>{
					this.info = res.data
					this.list = res.data.rootInfoDos
				})
			},
			tapcourser(){
				this.http('/api/orderMain/pay',{
					courseId:this.item.courseId
				}).then(res=>{
					uni.requestPayment({
					    provider: 'weixin',
					    orderInfo: 'orderInfo',
						timeStamp:res.data.timeStamp,
						nonceStr:res.data.nonceStr,
						package:res.data.prepayId,
						signType:res.data.signType,
						paySign:res.data.paySign,
					    success:  (res)=> {
					        this.toast('支付成功')
							this.getinfo()
							this.type=2
							this.$refs.uplist.close()
					    },
					    fail:  (err)=> {
							this.toast('支付失败')
					    }
					});
				})
			},
			tablist(index){
				this.tindex=index
			},
			change(e,item){
				console.log(e,item)
				if(e.length){
					item.zhan = 1
				}else{
					item.zhan = 0
				}
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
		}
	}
</script>

<style>
	
.active{
	color:#000;
		font-weight: bold;
	}
	uni-button:after {margin: 0;		line-height: normal;
			padding: 0;
			border:none;
			background: none;
		}
		button::after{margin: 0;		line-height: normal;
			padding: 0;
			border:none;
			background: none;
		}
		button{
			line-height: normal;
			margin: 0;
			padding: 0;
			border:none;
			background: none;
		}
		.but{margin: 0;		line-height: normal;
			padding: 0;
			border:none;
			background: none;
		}
	
</style>
